<template>
  <div class="headerWrapper">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" router>
      <el-menu-item class="headerLogo" disabled>
        <a href="https://www.qiwenshare.com/" target="_blank">
          <img class="logo" :src="logoUrl" />
        </a>
      </el-menu-item>
      <!-- 加入空间修改选项------------------------------------------------------ -->
      <el-menu-item
        class="headerItem"
        v-show="isLogin"
        index="1"
        :route="{ path: '/file', query: { filepath: '/', filetype: 0,refresh:`diskType-1` }}"
        @click="$store.commit('changeDiskType', 1)"
      >个人空间</el-menu-item>
      <el-menu-item
        class="headerItem"
        v-show="isLogin"
        index="2"
        :route="{ path: '/file', query: { filepath: '/', filetype: 0,refresh:`diskType-2` }}"
        @click="$store.commit('changeDiskType', 2)"
      >部门空间</el-menu-item>
      <el-menu-item
        class="headerItem"
        v-show="isLogin"
        index="3"
        :route="{ path: '/file', query: { filepath: '/', filetype: 0,refresh:`diskType-3` }}"
        @click="$store.commit('changeDiskType', 3)"
      >公共空间</el-menu-item>
      <!-- <el-menu-item
        class="headerItem"
        index="1"
        :route="{ name: 'File', query: { filepath: '/', filetype: 0 } }"
      >网盘</el-menu-item>-->
      <!-- <el-menu-item class="headerItem userDisplay right-menu-item" index="2" v-show="isLogin">
        <el-avatar :size="34" :src="userImgUrl" fit="cover">
          <img :src="userImgDefault" />
        </el-avatar>
        <span class="username-header">{{ username }}</span>
      </el-menu-item>-->
      <el-menu-item
        class="headerItem login right-menu-item"
        v-show="isLogin"
        @click="showUserInfo()"
      >个人信息</el-menu-item>
      <el-menu-item
        class="headerItem exit right-menu-item"
        v-show="isLogin"
        index="666"
        @click="exitButton()"
      >退出</el-menu-item>
      <el-menu-item
        class="headerItem login right-menu-item"
        v-show="!isLogin"
        index="4"
        :route="{ name: 'Login' }"
      >登录</el-menu-item>
      <el-menu-item
        class="headerItem register right-menu-item"
        v-show="!isLogin"
        index="5"
        :route="{ name: 'Register' }"
      >注册</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { logout,getUserInfo } from "@/request/user.js";
import { mapGetters } from "vuex";

export default {
  name: "Header",
  data() {
    return {
      logoUrl: require("@/assets/images/common/logo.jpg"),
      userImgDefault: require("@/assets/images/settings/userImg.png")
    };
  },
  computed: {
    ...mapGetters(["isLogin", "userImgUrl", "username", "diskType"]),
    activeIndex: {
      get() {
        let routerName = this.$route.name;
        const ROUTERMAP = {
          File: ["0", "1", "2", "3"],
          Login: "4",
          Register: "5"
        };
        if (typeof ROUTERMAP[routerName] == "object") {
          return ROUTERMAP[routerName][this.diskType];
        } else {
          return ROUTERMAP[routerName];
        }
      },
      set() {
        return "1";
      }
    }
  },
  methods: {
    //  退出登录
    exitButton() {
      logout().then(res => {
        if (res.success) {
          this.$message.success(res.data);
          this.$store.dispatch("getUserInfo").then(() => {
            sessionStorage.removeItem("operaColumnExpand");
            sessionStorage.removeItem("isFolder");
            sessionStorage.removeItem("selectedColumnList");
            sessionStorage.removeItem("imageModel");
            this.$router.push({ path: "/login" });
          });
        } else {
          this.$message.error(res.errorMessage);
        }
      });
    },
    //展示个人信息
    showUserInfo(){
      const loading = this.$loading({
          lock: true,
          text: '稍等',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
      });
      getUserInfo().then(res=>{
        loading.close();
        this.$alert(`<h3>用户名：${res.data.username}</h3><h3>手机号：${res.data.telephone}</h3>
        <h3>部门：${res.data.department}</h3>`, '我的信息', {
          dangerouslyUseHTMLString: true
        });
      })
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

.headerWrapper {
  width: 100%;
  padding: 0 20px;
  box-shadow: $tabBoxShadow;

  >>> .el-menu--horizontal {
    .el-menu-item:not(.is-disabled):hover {
      border-bottom-color: $Primary !important;
      background: $tabBackColor;
    }
  }

  .el-menu-demo {
    display: flex;
    position: relative;

    .headerLogo {
      color: $Primary;
      font-size: 60px;
      opacity: 1;
      cursor: default;

      a {
        display: block;
      }

      .logo {
        height: 40px;
        vertical-align: baseline;
      }
    }

    .right-menu-item {
      position: absolute;
    }

    .userDisplay {
      right: 70px;
      width: 180px;

      .username-header {
        margin-left: 6px;
        min-width: 60px;
        display: inline-block;
        text-align: center;
      }
    }

    .exit {
      right: 0;
    }

    .login {
      right: 70px;
    }

    .register {
      right: 0px;
    }
  }
}
</style>
